<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>pdf预览</title>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
  height: 500px; 
  
}
embed{
  height: 500px; 
  border: 1px solid red;

}
.my_iframe{
    height: 100%;
}
.download{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
    background-color: blue;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>
<body>
 <!-- 被vm 实例所控制的区域 -->
    <div id="app">
        <iframe
        id="inlineFrameExample"
        title="Inline Frame Example"
        width="300"
        height="100%"
        class="my_iframe"
        src="https://u-park.lyunweb.com:60001/prod-api/oss/smart-park/2023/09/01/37910287b9204520909726400bf54e21.pdf">
      </iframe>  
      <div class="download">
        文件下载
      </div>
    </div>

    <script>
        const vm=new Vue({
           el:'#app',
           data:{
			  
		   },
           created(){
            var myFrame = document.getElementById("inlineFrameExample");
  myFrame.style.width = "100%";
  myFrame.style.height = "100vh";
		   },
           methods:{}
        });
    </script>
</body>

</html>